import React, { useRef, useEffect, useState } from 'react';
import { findDOMNode } from 'react-dom';

import { Button, Card, Form, Upload, Image, message, List, Select, Tag } from 'antd';
import { LoadingOutlined, SmileOutlined, InboxOutlined, PlusOutlined, DownOutlined, EyeOutlined, EditOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons';
import { PageContainer, BasicLayout, FooterToolbar, } from '@ant-design/pro-layout';
import ProForm, {
  ProFormText,
  ProFormSelect,
  ProFormRadio,
} from '@ant-design/pro-form';
import { connect, history } from 'umi';
import Editor from 'braft-editor'
import 'braft-editor/dist/index.css'

const { Dragger } = Upload;

const uploadProps = {
  name: 'file',
  multiple: false,
  action: '/upload',
  showUploadList:false,
  accept: '.png,.jpg,.jpeg,.svg',

  onChange(info) {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} 文件上传成功。`);
    } else if (status === 'error') {
      message.error(`${info.file.name} 文件上传失败。`);
    }
  },
};
const Detail = ({ dispatch }) => {
  const [form] = Form.useForm({
    content:Editor.createEditorState(null)
  })
  useEffect(() => {
    dispatch({
      type: 'articleList/detail',
      payload: {
        id: history.location.query.id
      },
    });
  }, []);

  const handleFormSubmit = (values) => {
    console.log(values);

  };
  const handleList = () => {
    history.push(`/list/article-list`)
  };
  const handleEditorChange = (content) => {
    form.setFieldsValue({
      content
    })
}

  const tags = [
    {
      value: 1,
      label: 'HTML',
    },
    {
      value: 2,
      label: 'JavaScript',
    },
    {
      value: 3,
      label: 'Vue',
    },
    {
      value: 4,
      label: 'React',
    },
    {
      value: 5,
      label: 'Node',
    },
  ];
  const categories = [
    {
      value: 1,
      label: '前端',
    },
    {
      value: 2,
      label: '后端',
    },
    {
      value: 3,
      label: 'ios',
    },
    {
      value: 4,
      label: 'Android',
    },
    {
      value: 5,
      label: '小程序',
    },
  ];
  return (
    <PageContainer>
      <Card>
        <ProForm
          submitter={{
            render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
          }}
          onFinish={async (values) => handleFormSubmit(values)}
        >
          <ProFormText
            name="title"
            label="文章标题"
            placeholder="请输入文章标题"
            rules={[{ required: true }]}
            allowClear
            style={{ width: '60%' }}
          />
          <ProForm.Group>
            <ProFormSelect
              options={categories}
              width="md"
              name="category"
              rules={[{ required: true,message:'请选择文章分类' }]}
              label="文章分类"
              allowClear
            />
            <ProFormSelect
              width="md"
              mode="multiple"
              options={tags}
              rules={[{ required: true ,message:'请选择文章标签'}]}
              name="tag"
              label="文章标签（多选）"
              allowClear
            />
          </ProForm.Group>
          <ProFormRadio.Group
            label="文章置顶"
            rules={[{ required: true }]}
            name="toTop"
            initialValue={0}
            options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
          />
          <Form.Item label='文章封面' name='cover' rules={[{ required: true,message:'请上传文章封面' }]}>
          <Dragger {...uploadProps} style={{width:400,height:300}}>
          {
            !form.cover ? (<React.Fragment>
              <p className="ant-upload-drag-icon"><InboxOutlined /></p><p className="ant-upload-text">点击或拖拽上传</p><p className="ant-upload-hint">
                支持png,jpg,jpeg,svg等格式图片,且不超过5MB</p>
            </React.Fragment>) : (<Image
              width={400}
              src={form.cover}
            />)
          }
        </Dragger>
          </Form.Item>
          <Form.Item label='正文内容' name='content' rules={[{ required: true,message:'输入正文内容' }]}>
          <Editor
                    style={{border:'1px solid #dbdbdb'}}
                    value={form.content}
                    onChange={handleEditorChange}
                />
          </Form.Item>
        </ProForm>
        
      </Card>
    </PageContainer>
  );
};

export default connect(({ articleList, loading }) => ({
  articleList,
  loading: loading.models.articleList,
}))(Detail);
